<!DOCTYPE html>
<html>
    <head>
        <title>AI流式响应示例</title>
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            .chat-container { max-width: 800px; margin: 0 auto; }
            .messages { height: 400px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }
            .input-container { display: flex; }
            #user-input { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
            button { margin-left: 10px; padding: 10px 20px; background-color: #2196F3; color: white; border: none; border-radius: 5px; cursor: pointer; }
            button:hover { background-color: #1976D2; }
            .message { margin: 10px 0; padding: 10px; border-radius: 5px; }
            .user-message { background-color: #e3f2fd; text-align: right; }
            .ai-message { background-color: #f5f5f5; }
        </style>
    </head>
    <body>
        <div class="chat-container">
            <h1>🤖 AI流式响应示例</h1>
            <div id="messages" class="messages"></div>
            <div class="input-container">
                <input type="text" id="user-input" placeholder="输入您的问题..." />
                <button onclick="sendMessage()">发送</button>
            </div>
        </div>
        
        <script>
            const messages = document.getElementById('messages');
            const input = document.getElementById('user-input');
            
            function addMessage(content, isUser = false) {
                const div = document.createElement('div');
                div.className = isUser ? 'user-message message' : 'ai-message message';
                div.innerHTML = '<strong>' + (isUser ? '用户' : 'AI') + ':</strong> ' + content;
                messages.appendChild(div);
                messages.scrollTop = messages.scrollHeight;
            }
            
            function sendMessage() {
                const message = input.value.trim();
                if (!message) return;
                
                addMessage(message, true);
                input.value = '';
                
                const aiDiv = document.createElement('div');
                aiDiv.className = 'ai-message message';
                aiDiv.innerHTML = '<strong>AI:</strong> <span></span>';
                messages.appendChild(aiDiv);
                
                const responseSpan = aiDiv.querySelector('span');
                
                try {
                    const eventSource = new EventSource('/chat?message=' + encodeURIComponent(message));
                    
                    eventSource.onmessage = function(event) {
                        const data = JSON.parse(event.data);
                        
                        if (data.type === 'start') {
                            responseSpan.innerHTML = '';
                        } else if (data.type === 'chunk') {
                            responseSpan.innerHTML += data.content;
                        } else if (data.type === 'end') {
                            eventSource.close();
                        }
                    };
                    
                    eventSource.onerror = function() {
                        responseSpan.innerHTML += ' [连接错误]';
                        eventSource.close();
                    };
                    
                } catch (error) {
                    responseSpan.innerHTML = ' [发送失败: ' + error.message + ']';
                }
            }
            
            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendMessage();
                }
            });
        </script>
    </body>
</html>